<template>
    <div class="page">
        <div v-show="this.$store.state.showBattery"><electricity></electricity></div>
        <transition name="el-fade-in-center">
            <guide v-show="this.$store.state.guideModule"></guide>
        </transition>
      
        <!-- 紧急停止 -->
        <div class="boxShadow stopBtn">
            <el-button icon="el-icon-remove" @click="stopBtn"></el-button>
        </div>

         <!--定位点  -->
         <div class="boxShadow nowLocation">
             <el-button icon="el-icon-aim" @click="clickLocationBtn" :disabled="stopBtnFlag"></el-button>
         </div>

         <!-- 右侧功能按钮 -->
         <div v-show="!this.$store.state.userRole">
            
         </div>
         
         <!-- 引导结束按钮 -->
         <transition name="el-fade-in-center">
             <guide-end></guide-end>
         </transition>

         <!-- 更多功能 -->
         <more></more>

         <!-- 放大缩小 -->
         <div class="boxShadow flex mapSizeBtn">
             <el-button icon="el-icon-plus" :disabled="this.$store.state.zoomDisabled === 0" class="zoomBtn" @click="mapZoom('max')"></el-button>
             <el-button icon="el-icon-minus" :disabled="this.$store.state.zoomDisabled === 1" class="zoomBtn" @click="mapZoom('min')"></el-button>
         </div>
         
        <!-- 保存地图按钮 -->
         <transition name="el-zoom-in-bottom">
            <mapping></mapping>
         </transition>

         <!-- 授权密码 -->
         <transition name="el-zoom-in-bottom">
             <authorization></authorization>
         </transition>

         <!-- 拖拽圆盘 -->
         <transition name="el-fade-in-center">
             <joystick-component></joystick-component>
         </transition>
         
         <!-- 站点列表 -->
         <transition name="el-zoom-in-bottom">
            <waypoints-list></waypoints-list>
         </transition>

         <!-- 站点详情 -->
         <transition name="el-zoom-in-bottom">
             <waypoint-detail v-show="this.$store.state.stationModule"></waypoint-detail>
         </transition>

         <!-- 添加站点 -->
         <transition name="el-zoom-in-bottom">
            <waypoint-add ></waypoint-add>
         </transition>

         <!-- 轨迹列表 -->
         <transition name="el-zoom-in-bottom">
            <trajectory-list></trajectory-list>
         </transition>

         <!-- 轨迹详情 -->
         <transition name="el-zoom-in-bottom">
             <trajectory-detail></trajectory-detail>
         </transition>

         <!-- 添加轨迹 -->
         <transition name="el-zoom-in-bottom">
             <trajectory-add></trajectory-add>
         </transition>

         <!-- wifi -->
         <transition name="el-zoom-in-bottom">
             <wifi-setting></wifi-setting>
         </transition>
         
         <!-- 软件更新 -->
         <transition name="el-zoom-in-bottom">
             <update></update>
         </transition>

         <!-- 音量调节 -->
         <transition name="el-zoom-in-bottom">
             <volume></volume>
         </transition>

         <!-- 分支 -->
         <transition name="el-zoom-in-bottom">
             <branch></branch>
         </transition>

         <!-- 上传地图 -->
         <transition name="el-zoom-in-bottom">
             <upload-map></upload-map>
         </transition>

         <!-- 下载地图 -->
         <transition name="el-zoom-in-bottom">
             <download-map></download-map>
         </transition>

         <div id="mapNavDiv"></div>
    </div>    
</template>

<script>
import electricity from '@/components/electricity.vue'
import guide from '@/components/guide/guide.vue'
import mapping from '@/components/mapping.vue'
import authorization from '@/components/authorization.vue'
import joystickComponent from '@/components/joystickComponent.vue'
import waypointsList from '@/components/waypointsList.vue'
import waypointDetail from '@/components/waypointDetail.vue'
import waypointAdd from '@/components/waypointAdd.vue'
import trajectoryList from '@/components/trajectoryList.vue'
import trajectoryDetail from '@/components/trajectoryDetail.vue'
import trajectoryAdd from '@/components/trajectoryAdd.vue'
import wifiSetting from '@/components/wifiSetting.vue'
import update from '@/components/update.vue'
import volume from '@/components/volume.vue'
import branch from '@/components/branch.vue'
import guideEnd from '@/components/guideEnd.vue'
import more from '@/components/more.vue'
import uploadMap from '@/components/mapUpload.vue'
import downloadMap from '@/components/mapDownload.vue'

import { stopRobot } from '../js/navigation'
import { locationRobot } from '../js/robot'
import { zoomIn, zoomOut } from '../js/map'
export default {
    name: 'home',
    components:{
        electricity,
        guide,
        mapping,
        joystickComponent,
        waypointsList,
        waypointDetail,
        waypointAdd,
        trajectoryList,
        trajectoryDetail,
        trajectoryAdd,
        wifiSetting,
        authorization,
        update,
        volume,
        branch,
        guideEnd,
        more,
        uploadMap,
        downloadMap
    },
    data(){
        return{
            stopBtnFlag: false
        }
    },

    //计算属性
    watch:{
        
    },

    mounted(){
        
    },

    methods:{
        //急停按钮
        stopBtn: function(){
            const that = this;
            if(that.stopBtnFlag)return
            that.stopBtnFlag = true;
            setTimeout(()=>{
                console.log(that.stopBtnFlag)
                that.stopBtnFlag = false;
            }, 3000)
            stopRobot()
        },

        //定位
        clickLocationBtn: function(){
            const that = this;
            locationRobot();
        },

        //放大缩小
        mapZoom:function(type){
            let that = this;
            if(type == 'max'){
                that.$store.commit("zoomDisabled", 0)
                setTimeout(function(){
                    zoomIn('zoomIn');
                }, 300)
            }else{
                that.$store.commit("zoomDisabled", 1)
                setTimeout(function(){
                    zoomIn('zoomOut');
                }, 300)
            }
        }
    }
}
</script>

<style scoped lang="less">
    .page{
        position: relative;
        padding: 15px 0px;
        font-size: 14px;
        height: 100%;
        overflow: hidden;
    }
    .nowLocation{
        width: 40px;
        height: 40px;
        border-radius: 4px;
        position: fixed;
        bottom: 30px;
        left: 15px;
        z-index: 994;
        button{
            padding: 0;
            width: 100%;
            height: 100%;
            border: none;
            font-size: 24px;
            color: #409EFF;
        }
    }
   
    .stopBtn{
        width: 40px;
        height: 40px;
        border-radius: 4px;
        position: fixed;
        bottom: 115px;
        left: 15px;
        z-index: 994;
        button{
            padding: 0;
            border: none;
            font-size: 26px;
            color: #F56C6C;
            width: 100%;
            height: 100%;
        }
    }
    
    .mapSizeBtn{
        flex-direction: column;
        width: 40px;
        height: 80px;
        border-radius: 4px;
        position: fixed;
        bottom: 115px;
        right: 15px;
        z-index: 994;
        background-color: #ffffff;
        .zoomBtn{
            width: 100%;
            height: 40px;
            padding: 0;
            margin-left: 0;
            border: none;
        }
    }
</style>